<template>
	<view>
		<!-- 在标签上创建@getCatalogId自定义事件，触发方法 -->
		<w-nav  @getPupopCatalogId="getPupopCatalogId" :catalogs="$catalogs" @getCatalogId='getCatalogId'></w-nav>
		<!-- <w-article  :articles="articles"></w-article> -->		
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="article in articles" :key="article.id">
				<u-cell :title="article.title" @click="toDetail(article.id)"></u-cell>
			</u-list-item>	
		</u-list>
	</view>
</template>

<script>
	import wNav from '@/components/w-nav.vue'
	// import wArticle from '@/components/w-article.vue'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				catalogs: [],
				countPerPage: 20,//默认
				currentPage: 1,//默认
				articles:[]
			}
		},
		components: {
			wNav,
			//wArticle
		},
		computed: {
			...mapState(['$count', '$catalogs']),
			...mapGetters(['getCatalogsByShow', 'getCatalogsByHidden']),
			count() {
				//return this.$store.state.$count;
			}
		},
		
		onLoad() {
			//页面加载的时候，调用数据请求方法
			//this.getCatalogs();
			
			//页面启动时
			//加载文章 
			this.getArticlePage(this.countPerPage,this.currentPage);
		},
		methods: {
			...mapMutations(['SET_USERINFO']),
			selectCatalog(index, id) {
				this.cataIndex = index;
				//console.log(id);
			},


			getCatalogId(id) {
				console.log('编号',id) //获得分类编号
				//分类文章
				let params={
					cat_id:id //传参数的key一致
				}
				uni.$u.http.get('api/articles/catid',{
					params:params,
					}).then(res=>{
						console.log(res)
						if(res.code==1){
							this.articles=res.data;
						}
						else{
							
						}
						
					}).catch(err=>{
						
						console.log(err)
					})
				
			},
			getPupopCatalogId(id) {
				//数据存储的地方
				//Vuex 状态管理|持久化存储
				//
				console.log("父pupop", id)
			},
			/**
			 * 通过分页获取文章数据
			 * @param {Object} countPerPage 每页显示数量 20
			 * @param {Object} currentPage 当前页 1
			 */
			getArticlePage(countPerPage, currentPage) {
				//构建参数
				let params = {
					countPerPage: countPerPage,
					currentPage: currentPage
				}
				//执行get方法
				uni.$u.http.get('api/article/getAllArticle', {
						params: params
					})
					.then(res => {
						console.log(res);
						if(res.code==1){
							let articles=res.data.rows;
							
							//this.articles=articles;//不能实现下拉刷新这个效果
							//下拉刷新
							articles.forEach(article=>{
								this.articles.push(article);
							})
							console.log(countPerPage*currentPage)
							if((countPerPage*currentPage)>res.data.count){
								uni.showToast({
									title:'亲,数据没有了',
									duration:2000
									
								})
							}
							
						}
						else{
							
						}
					}).catch(err => {
						console.error(err);

					})
			},
			scrolltolower(){
				//下拉刷新
				this.currentPage++;
				this.getArticlePage(this.countPerPage,this.currentPage)
			},
			toDetail(id){
				console.log(id);
				let url='/pages/index/detail?id='+id;
				uni.navigateTo({
					url:url
				})
				
				//this.$Router.push({ path: '/pages/index/detail', query: { id: id }})	
			}

		},
		filters:{
			//过滤器
			trimString(value){
				//console.log(value)
				return value.substr(0,20)+"...";
			},
			// toStrUpper(value){
			// 	return value.toUpper;
			// }
			
		}
	}
</script>

<style scoped>
	
</style>
